<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>完善当当购物车页面</title>
    <link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
</head>
<body>

<div class="content">
    <div class="logo">
        <img src="images/dd_logo.jpg"><span>关闭</span>
    </div>
    <div class="cartList">
        <ul>
            <li>¥<input type="text" name="price" value="21.90"></li>
            <li><input type="button" name="minus" value="-" onclick="jianshao()"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="zengjia()">
            <script type="text/javascript">
            	function jianshao(){
            		var prices = document.getElementsByName("price")[0].value;
            		var count = parseInt(document.getElementsByName("amount")[0].value)-1;
            		if(count<1){
            			alert("不能再减了，再减就没有了！");
            		}
            		else{
            			document.getElementsByName("amount")[0].value=count;
            			var totals = parseFloat(prices*count);
            			document.getElementById("price"+0).innerHTML="￥"+totals;
            		}
            	}
            </script>
            
            <script type="text/javascript">
            	function zengjia(){
            		var prices = document.getElementsByName("price")[0].value;
            		var count = parseInt(document.getElementsByName("amount")[0].value)+1;
            			document.getElementsByName("amount")[0].value=count;
            			var totals = parseFloat(prices*count);
            			document.getElementById("price"+0).innerHTML="￥"+totals;
            	}
            </script>
            
            </li>
            <li id="price0">¥21.90</li>
            <li><p>移入收藏</p><p>删除</p></li>
        </ul>
        <ul>
            <li>¥<input type="text" name="price" value="24.00"></li><li><input type="button" name="minus" value="-" onclick="jiansh()"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="zengj()">
            <script type="text/javascript">
            	function jiansh(){
            		var prices = document.getElementsByName("price")[1].value;
            		var count = parseInt(document.getElementsByName("amount")[1].value)-1;
            		if(count<1){
            			alert("不能再减了，再减就没有了！");
            		}
            		else{
            			document.getElementsByName("amount")[1].value=count;
            			var totals = parseFloat(prices*count);
            			document.getElementById("price" + 1).innerHTML="￥"+totals;
            		}
            	}
            </script>
            
            <script type="text/javascript">
            	function zengj(){
            		var prices = document.getElementsByName("price")[1].value;
            		var count = parseInt(document.getElementsByName("amount")[1].value)+1;
            			document.getElementsByName("amount")[1].value=count;
            			var totals = parseFloat(prices*count);
            			document.getElementById("price" + 1).innerHTML="￥"+totals;
            	}
            </script>
            </li>
            <li id="price1">¥24.00</li>
            <li><p>移入收藏</p><p>删除</p></li>
        </ul>
        <ol>
            <li id="totalPrice">&nbsp;</li>
            <li><span onclick="total()">结 算</span></li>
            <script type="text/javascript">
            	function total(){
            		var prices = document.getElementsByName("price");
            		var count = document.getElementsByName("amount");
            		var sum = 0;
            		for (var i = 0;i<prices.length;i++) {
            			sum+=prices[i].value*count[i].value;
            		}
            		document.getElementById("totalPrice").innerHTML="￥"+sum;
            	}
            	
            </script>
        </ol>
    </div>
</div>
</body>
</html>